<template>
    <div class="video">
        <div class="video_box">
            <div class="xgplayer" id="meg">

            </div>
        </div>
    </div>
</template>

<script >
  import { defineComponent,onMounted  } from 'vue'
  import Player from 'xgplayer'
  export default defineComponent({
    name: 'Video',
    setup(props, context) {
      onMounted(() => {
        const player = new Player({
          id: 'meg',
          autoplay: false,
          width: 700,
          height:400,
            //播放地址
            url: 'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4',
          // 封面
            poster: "https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
          playsinline: true,
          playbackRate: [0.5, 0.75, 1, 1.5, 2], //传入倍速可选数组
            //播放下一集
            playNext: {
                urlList: [
                    // 'url1',
                    // 'url2',
                    // 'url3'
                ],
            },
        //    画中画模式
            pip: true,
            //网页样式的全屏
            cssFullscreen: true,
            //截图
            screenShot: true,
            //开启键盘快捷键
            keyShortcut: 'on',
            errorTips: `请<span>刷新</span>试试`
        })
      });
      return {

      }
    }
  });
</script>

<style lang="scss" scoped>
    .video {
        width: 1200px;
        margin: 0 auto;
        padding: 0;
        .video_box {
            display: flex;
            margin:10px 0;
            width: 100%;
            height: 400px;
            .xgplayer {
                margin-left: 5px;
                width: 800px;
                height: 400px;
                /*background-color: darkseagreen;*/
            }
        }
    }
</style>
